<template>
  <div>
    <h2 class="title">风险地区</h2>
    <div id="myChart" :style="{width: '1000px', height: '400px'}"></div>
  </div>
</template>

<script>
  export default {
    name: 'organization',
    data() {
      return {
        echart: [],
        ranklevel: '',
        provinceno: '',
        cityno: '',
        pagecurrent: 1,
        pagesize:10
      }
    },
    created() {
      this.getUserInfo();
    },
    mounted() {
      // this.drawLine();
    },
    methods: {
      // 城市概况
      getCityList() {
        this.headlist = [];
        this.datalist = [];
        this.echart1 = [];
        this.echart2 = [];

        this.$http('health/healthInfoStatistics/getPageBranchs', {
          "ranklevel": this.ranklevel,
          "provinceno": this.provinceno,
          "schoolno": this.schoolno,
          "cityno": this.cityno,
          "istoday": '',
          "statisticstype": '',
          "pagecurrent": this.pagecurrent,
          "pagesize": this.pagesize
        }).then(res => {
          console.log(res)
          if (res.code == 200) {
            res.data.records[0].data.forEach(v => {
              this.headlist.push(v.branchName)
            });
            // this.datalist = res.data.records;
            console.log(this.datalist);
            res.data.records.forEach(val => {
              var obj = {};
              obj.name = val.name;
              obj.value = 2;
              this.echart.push(obj);
            });
          }
          this.drawLine();
        })
      },
      // 用户信息
      getUserInfo() {
        this.$http('/user/loginindex', {}).then(
          res => {
            console.log(res)
            if (res.code == 200) {
              this.$store.state.agent = res.data.user.organizationname;
              this.$store.state.agenter = res.data.user.collegename;
              this.$store.state.user = res.data.user.username;
              this.$store.state.phone = res.data.user.phone;
              this.$store.state.role = res.data.roleid;
              this.$store.state.position = res.data.user.position;
              this.arealist = res.data.adress;
              this.provinceno = res.data.user.provinceid;
              this.cityno = res.data.user.cityid;
              switch (res.data.roleid) {
                case 1002:
                  this.provinceFlag = true;
                  break;
                case 1003:
                  this.cityFlag = true;
                  break;
                case 1005:
                  this.schoolFlag = true;
                  break;
                case 1006:
                  this.gradeFlag = true;
                  break;
              }
              if (res.data.user.schoolid) {
                this.schoolno = res.data.user.schoolid
              }
              if (res.data.user.classno) {
                this.classno = res.data.user.classno
              }
              switch (this.$store.state.role) {
                case 1001:
                  this.ranklevel = '1';
                  break;
                case 1002:
                  this.ranklevel = '2';
                  break;
                case 1003:
                  this.ranklevel = '3';
                  break;
                case 1004:
                  this.ranklevel = '';
                  break;
                case 1005:
                  this.ranklevel = '4';
                  break;
                case 1006:
                  this.ranklevel = '5';
                  break;
              };
              this.getCityList()
            }
          }
        )
      },
       drawLine() {
         let that = this;
         // 基于准备好的dom，初始化echarts实例
         let myChart = this.$echarts.init(document.getElementById('myChart'));

         // 绘制图表
         myChart.setOption({
          title: {
                  // text: '风险地区',
                  // subtext: '纯属虚构',
                  left: 'center'
              },
              tooltip: {
                  trigger: 'item',
                  formatter: '{b} : {c} ({d}%)'
                  // formatter: '{a} <br/>{b} : {c} ({d}%)'
                  // formatter: function (params) {
                  //    return  params.name + ':' + {c} ({d}%)
                  // }
              },
              // legend: {
              //     orient: 'vertical',
              //     left: 'left',
              //     data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
              // },
              series: [
                  {
                      name: '访问来源',
                      type: 'pie',
                      radius: '80%',
                      center: ['50%', '50%'],
                      data: that.echart,
                      // data: [
                      //     {value: 335, name: '广东'},
                      //     {value: 310, name: '其他'},
                      //     {value: 234, name: '山东'},
                      //     {value: 135, name: '河北'},
                      //     {value: 1548, name: '北京'}
                      // ],
                      emphasis: {
                          itemStyle: {
                              shadowBlur: 10,
                              shadowOffsetX: 0,
                              shadowColor: 'rgba(0, 0, 0, 0.5)'
                          }
                      }
                  }
              ]
         });
       },
    }
  }
</script>

<style lang="less" scoped>
  .title{
    line-height: 50px;
    font-size: 16px;
    color: #fff;
    margin:0 0 30px 0;
    border-bottom: 1px solid #7d7d7d;
  }
</style>
